<template>
  <div class="ax-align-origin" style="height: 100%;">
    <div class="login ax-shadow-cloud ax-radius-md" style="height: 400px">
      <div class="ax-row ax-radius-md ax-split" style="height: 100%;">
        <div class="ax-col ax-col-14 ax-radius-left ax-radius-md cover" style="width: 100%;"></div>
        <div class="ax-col ax-col-10">
          <div class="core" style="height: 400px!important; width: 100%;">

            <div class="ax-break"></div>

            <div class="ax-tab">
              <ul class="ax-row ax-tab-nav ax-menu-tab">
                <router-link to="/login" class="ax-item">登录账号</router-link>
                <router-link to="/register" class="ax-item">用户注册</router-link>
                <li class="ax-col"></li>
              </ul>
              <ul class="ax-tab-content">
                <li>
                  <el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules">
                    <el-form-item label="" prop="username">
                      <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名" clearable>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                      <el-input v-model="loginForm.password" autocomplete="off" prefix-icon="el-icon-lock"
                                placeholder="请输入密码" show-password clearable>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password2">
                      <el-input v-model="loginForm.password2" autocomplete="off" prefix-icon="el-icon-lock"
                                placeholder="请输入确认密码" show-password clearable>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="name">
                      <el-input v-model="loginForm.name" prefix-icon="el-icon-user" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item style="width:100%;">
                      <el-button
                        :loading="loading"
                        size="medium"
                        type="primary"
                        style="width:100%; background-color: #6992bf!important; color: #ffffff!important; border-radius: 0; border: 0px; padding: 10px;"
                        @click.native.prevent="handleRegister">
                        <span v-if="!loading">注 册</span>
                        <span v-else>注 册 中...</span>
                      </el-button>
                      <div style="float: right;">
                        <router-link class="link-type" style="color: #ffffff;" to="/login">登录</router-link>
                      </div>
                    </el-form-item>
                  </el-form>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { register } from '@/api/user'

  export default {
    name: 'Register',
    data() {
      const validateData = (rule, value, callback) => {
        if (value.length === 0) {
          callback(new Error('必填项不能为空'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码长度不得小于6位'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          username: '',
          password: '',
          password2: '',
          name: '',
          cellphone: '',
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateData }],
          password: [{ required: true, trigger: 'blur', validator: validateData }],
          password2: [{ required: true, trigger: 'blur', validator: validateData }],
          name: [{ required: true, trigger: 'blur', validator: validateData }],
          cellphone: [{ required: true, trigger: 'blur', validator: validateData }],
          role: [{ required: true, trigger: 'blur', validator: validateData }],
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleRegister() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            if (this.loginForm.password === this.loginForm.password2) {
              // true：开启加载图标
              this.loading = true
              register(this.loginForm).then(response => {
                this.$message.success('注册成功');
                // 重定向
                this.$router.push({ path: this.redirect || '/' })
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            } else {
              this.$message.error('两次密码输入不一致');
              return false
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style lang="css">
  @import '~@/static/login/ax.css';
  @import '~@/static/login/ax-response.css';
  @import '~@/static/login/main.css';
</style>

<style lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
  }
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #333333;
  }

  .login-form {
    border-radius: 6px;
    width: 400px;
    padding: 25px 25px 5px 25px;
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #ffffff;
  }
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .login-code-img {
    height: 38px;
  }
</style>
